<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
</head>
<style>
    /* 设置居中 */
    #div01 {
        width: 800px;
        height: 120px;
        align-self: auto;
        margin: 0 auto;

    }

    /* 定位logo图片 */
    #picture1 {
        padding-top: 70px;
        position: relative;
    }

    /* 设置"3折"图片位置，并置于表格t1之上 */
    #picture2 {
        position: absolute;
        margin-top: 70px;
        margin-left: 500px;
        z-index: 2;
    }

    /* 设置logo右侧导航条 */
    #t1 {
        border: "1px";
        width: 200px;
        height: 30px;
        background-color: rgb(227, 252, 240);
        color: rgb(144, 148, 151);
        font-size: 12px;
        margin-top: 85px;
        z-index: 1;
    }

    /* 设置首页导航条 */
    #t2 {
        width: 800px;
        height: 40px;
        background-color: rgb(255, 110, 43);
        font-size: 15px;
        color: white;
    }
    /* 设置首页导航条格式 */
    #div02 {
        width: 800px;
        height: 40px;
        text-align: center;
        margin: 0 auto;
    }
    /* 定义图书榜banner格式 */
    #div03 {
        text-align: center;
        margin: 0 auto;
    }
    /* 设置图书榜banner图片格式 */
    #picture3 {
        width: 800px;
    }
    /* 定义畅销榜格式 */
    #div04 {
        width: 800px;
        height: 400px;
        align-self: center;
        margin: 0 auto;
        border: 2px solid rgb(179, 235, 141);
        position: relative;
    }
    /* 设置畅销榜图片格式 */
    #picture4 {
        position: absolute;
        margin-left: -20px;
        margin-top: 15px;
    }
    /* 设置编号为1的图片格式 */
    #picture5 {
        position: absolute;
        margin-left: 15px;
        margin-top: 100px;
    }

    #picture6 {
        position: absolute;
        margin-left: 30px;
        margin-top: 100px;
    }
    /* 偷影子的人 文字简介格式 */
    #div05 {
        width: 150px;
        height: 200px;
        font-size: 6px;
        margin-left: 280px;
        margin-top: 100px;
        line-height: 1.5;
    }
    /* 设置编号为2的图片格式 */
    #picture7,
    #picture8 {
        position: absolute;
        margin-left: 470px;
        margin-top: 100px;
    }
    /* 看见 文字简介格式 */
    #div06 {
        width: 200px;
        height: 100px;
        font-size: 6px;
        margin-left: 580px;
        margin-top: -210px;
        line-height: 1.2;
    }
    /* 设置编号为3的图片格式 */
    #picture9,
    #picture10 {
        position: absolute;
        margin-left: 470px;
        margin-top: 250px;
    }
    /* 改变孩子先改变自己 简介格式 */
    #div07 {
        width: 150px;
        height: 100px;
        font-size: 6px;
        margin-left: 580px;
        margin-top: 60px;
        line-height: 1.2;
    }
    /* 底部批准号格式 */
    #div08 {
        width: 800px;
        height: 60px;
        text-align: center;
        align-self: center;
        margin: 0 auto;

    }
</style>

<body>

    <div id="div01">
        <img id="picture1" src="img/logo.jpg">
        <img id="picture2" src="img/icon_count.png">
        <!-- 使用table制作 -->
        <table id="t1" align="right">
            <tr align="center">
                <td>尾品汇</td>
                <td>当当优品</td>
                <td>数字馆</td>
                <td>都看阅器</td>
            </tr>
        </table>
    </div>
    <div id="div02">
        <!-- 使用table制作 -->
        <!-- 也可使用div  float:left 将纵向变横向 -->
        <table id="t2">
            <tr align="center">
                <td>首页</td>
                <td>图书</td>
                <td>音像</td>
                <td>童装</td>
                <td>服装</td>
                <td>鞋靴</td>
                <td>运动</td>
                <td>箱包</td>
                <td>美妆</td>
                <td>珠宝</td>
                <td>家居</td>
                <td>食品</td>
                <td>酒</td>
                <td>手机</td>
                <td>数码</td>
                <td>电脑</td>
                <td>家电</td>
            </tr>
        </table>
    </div>
    <div id="div03">
        <img id="picture3" src="img/banner.png" alt="center">
    </div>
    <div id="div04">
        <!-- 导入畅销榜相关图片 -->
        <img id="picture4" src="img/bg_bang.gif">
        <img id="picture5" src="img/book-01.jpg">
        <img id="picture6" src="img/bookNo1.gif">
        <img id="picture7" src="img/book-02.jpg">
        <img id="picture8" src="img/bookNo2.gif">
        <img id="picture9" src="img/book-03.jpg">
        <img id="picture10" src="img/bookNo3.gif">
        <div id="div05">
            <p style="font-size:12px;color:rgb(62, 143, 209)">
                偷影子的人
            </p>
            <p>
                作者：[法]马克·李维（Marc Levy）著
            </p>
            <p>
                出版社:湖南文艺出版社
            </p>
            <p>
                <!-- 设置简介中不同颜色的字体 -->
                当当价：<span style="color: rgb(168, 35, 35)">&yen 17.90</span>
            </p>
            <p>
                不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，
                今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
                一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：
                他能“偷别人的影子”
            </p>
        </div>
        <div id="div06">
            <p style="font-size:12px;color:rgb(62, 143, 209)">
                看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘）
            </p>
            <p>
                作者：柴静&nbsp著
            </p>
            <p>
                出版社:广西师范大学出版社
            </p>
            <p>
                <!-- 设置简介中不同颜色的字体 -->
                <span>&yen 29.40</span style="color: rgb(168, 35, 35)">&nbsp&nbsp<span style="color:rgb(106, 199, 168)">7.4折</span>
            </p>
        </div>
        <div id="div07">
            <p style="font-size:12px;color:rgb(62, 143, 209)">
                改变孩子先改变自己
            </p>
            <p>
                作者：贾容韬&nbsp贾毅&nbsp著
            </p>
            <p>
                出版社:作家出版社
            </p>
            <p>
                <!-- 设置简介中不同颜色的字体 -->
                <span>&yen 22.20</span style="color: rgb(168, 35, 35)">&nbsp&nbsp<span style="color:rgb(106, 199, 168)">7.4折</span>
            </p>
        </div>
    </div>
    <div id="div08">
        <p style="font-size:1px;color: rgb(171, 174, 177)"> Copyright(C)
            当当网 2004-2017, All Rights Reserved
            <img src="img/validate.gif" />
            京ICP证041189号出版物经营许可证 新出发京批字第直0673号
        </p>
    </div>

</body>

</html>